<template>
  <div class="page-content">
    <div class="text-right">
      <el-button size="small" class="mb-2 d-print-none" @click="printPage">
        <i class="fa fa-print"></i>
        打印
      </el-button>
    </div>
    <div class="p-5 border-noprint" :id="printId">
      <h3 class="my-5 text-center">地址确认书</h3>
      <div class="font-weight-bold">
        <span>确认人：</span>
        <span class="text-decoration">{{ guard.gua_entity || '' }}</span>
      </div>
      <div class="font-weight-bold">
        <span>证件号：</span>
        <span class="text-decoration">{{ guard.gua_entity_cert_no || '' }}</span>
      </div>
      <div class="font-weight-bold">
        <span>住 址：</span>
        <span class="text-decoration">{{ guard.gua_entity_address || '' }}</span>
      </div>
      <div class="font-weight-bold">
        <span>联系电话：</span>
        <span class="text-decoration">{{ guard.gua_entity_mobile || '' }}</span>
      </div>

      <div class="text-indent mt-5">
        我确认以上地址和电话能联系到我本人，且地址、联系方式、工作单位发生变更，如不通知{{
          acceptAgencyName
        }}，致使{{ acceptAgencyName }}无法送达相关通知等资料，视为已经送达。
      </div>

      <div class="d-flex" style="margin: 50px 0 100px 0">
        <div>确认人签字：</div>
      </div>
    </div>
  </div>
</template>

<script>
import { printA4 } from '@vimi/utils-tool'

export default {
  components: {},
  props: {
    contract: {
      type: Object,
      default: () => ({}),
    },
    guard: {
      type: Object,
      default: () => ({}),
    },
    relatedData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {}
  },
  computed: {
    printId() {
      return `print-contract-address-${this.guard.gua_contract_id}`
    },
    acceptAgencyName() {
      return this.contract.accept_entrust_entity_name || ''
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    printPage() {
      printA4(
        document.getElementById(this.printId).innerHTML,
        `
        body {font-family: SimSun;}
        .text-indent{text-indent: 2rem;}
        .text-decoration{text-decoration: underline;}
        .page-content {max-width: 794px;margin: 0 auto;font-size: 1.2rem;line-height: 2;}
        .border-bottom-dark {border-bottom: 1px solid #333;}
      `
      )
    },
  },
}
</script>
<style lang="scss" scoped>
.page-content {
  max-width: 794px;
  margin: 0 auto;
  font-size: 1.2rem;
  line-height: 2;
}
.text-indent {
  text-indent: 2.4rem;
}
.text-decoration {
  text-decoration: underline;
}
.border-noprint {
  border: 1px solid $border-color;
}
.border-bottom-dark {
  border-bottom: 1px solid #333;
}
</style>
